<template>
  <div class="app-container">
    <el-tabs type="card"  v-model="courseType" @tab-click="handleTabClick" >
      <el-tab-pane v-for="type in courseTypes" :label="type.dictLabel" :name="type.dictValue">
        <el-tabs type="border-card" v-model="courseId" tab-position="left" style="height: 850px" @tab-click="handleTabClick1">
          <el-tab-pane
            lazy
            v-for="(item, index) in courseList"
            :key="item.name"
            :label="item.name"
            :name="item.id.toString()"
          >
            <el-descriptions title="课程信息">
              <el-descriptions-item label="课程名称">{{item.name}}</el-descriptions-item>
              <el-descriptions-item label="所属班级">{{item.className}}</el-descriptions-item>
              <el-descriptions-item label="授课教师">{{item.teacherName}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="套餐信息">
            </el-descriptions>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                  v-hasPermi="['ysg:course:add']"
                >新增</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="single"
                  @click="handleUpdate"
                  v-hasPermi="['ysg:course:edit']"
                >修改</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete"
                  v-hasPermi="['ysg:course:remove']"
                >下架</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExport(item.name)"
                  v-hasPermi="['ysg:course:export']"
                >导出</el-button>
              </el-col>
            </el-row>
            <el-table height="600" v-loading="loading" :data="setMealList" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="套餐名称" align="center" prop="name" />
              <el-table-column label="单价" align="center" prop="price">
                <template slot-scope="scope">
                  {{scope.row.price + '元/节'}}
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center" prop="number">
                <template slot-scope="scope">
                  {{scope.row.number + '节'}}
                </template>
              </el-table-column>
              <el-table-column label="课时" align="center" prop="classHour" />
              <el-table-column label="折扣" align="center" prop="discount">
                <template slot-scope="scope">
                  {{scope.row.discount ? selectDictLabel(dict.type.discount,scope.row.discount) : '--'}}
                </template>
              </el-table-column>
              <el-table-column label="总价" align="center" prop="total" />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['ysg:setMeal:edit']"
                  >修改</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['ysg:setMeal:remove']"
                  >下架</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <!-- 添加或修改套餐管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-position="right" label-width="80px">
        <el-form-item label="套餐名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入套餐名称" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input-number :precision="1" :step="100" v-model="form.price" placeholder="请输入单价" style="width: 300px" />
        </el-form-item>
        <el-form-item label="数量" prop="number">
          <el-select v-model="form.number" placeholder="请选择数量" @change="handleNumberChange" style="width: 300px">
            <el-option
              v-for="dict in dict.type.course_number"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课时" prop="classHour">
          <el-input disabled v-model="form.classHour" placeholder="请输入课时" style="width: 300px">
            <template slot="append">节</template>
          </el-input>
        </el-form-item>
        <el-form-item label="折扣" prop="discount">
          <el-select v-model="form.discount" placeholder="请选择折扣" @change="handleDiscountChange" style="width: 300px">
            <el-option
              v-for="dict in dict.type.discount"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="总价" prop="total">
          <el-input disabled v-model="form.total" placeholder="请输入总价" style="width: 300px"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listCourse, getCourse, delCourse, addCourse, updateCourse } from "@/api/ysg/course"
import { listSetMeal, getSetMeal, delSetMeal, addSetMeal, updateSetMeal } from "@/api/ysg/setMeal"
import {getClassOptions,getTeacherOptions} from "@/api/ysg/common"
import {getDicts} from "../../../api/system/dict/data";
export default {
  dicts:['course_number','discount'],
  data(){
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          { required: true, message: "id不能为空", trigger: "blur" }
        ],
        name: [
          { required: true, message: "套餐名称不能为空", trigger: "blur" }
        ],
        price: [
          { required: true, message: "单价不能为空", trigger: "blur" }
        ],
        number: [
          { required: true, message: "数量不能为空", trigger: "blur" }
        ],
        classHour: [
          { required: true, message: "课时不能为空", trigger: "change" }
        ],
        total: [
          { required: true, message: "总价不能为空", trigger: "blur" }
        ],
      },
      setMealList: [],
      courseList:[],
      courseType: null,
      courseTypes: [],
      courseId: null,
      height:0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  async created() {
    this.height = window.innerHeight
    await this.getCourseTypeList()
    await this.getCourseList()
    this.getList()
  },
  methods:{
    /** 查询套餐管理列表 */
    getList() {
      this.loading = true
      listSetMeal(this.queryParams).then(response => {
        this.setMealList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    getCourseList() {
      return new Promise(resolve => {
        const param = {
          pageSize:100,
          pageNum:1,
          type:this.courseType
        }
        listCourse(param).then(res => {
          this.courseList = res.rows
          this.courseId = this.courseList[0].id.toString()
          this.queryParams.courseId = this.courseId
          resolve()
        })
      })

    },
    getCourseTypeList() {
      return new Promise((resolve)=>{
        getDicts("course_type").then(res => {
          this.courseTypes = res.data;
          this.courseType = this.courseTypes[0].dictValue
          resolve()
        })
      })
    },
    async handleTabClick() {
      await this.getCourseList()
      this.getList()
    },
    handleTabClick1() {
      this.queryParams.courseId = this.courseId
      this.getList()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加套餐"
    },
    // 表单重置
    reset() {
      this.form = {}
      this.resetForm("form")
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    handleNumberChange (value) {
      this.form.classHour = value
      if(this.form.price) {
        this.form.total = value * this.form.price
      }
    },
    handleDiscountChange (value) {
      if(this.form.price && this.form.number) {
        this.form.total = (this.form.price * this.form.number * value).toFixed(2)
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSetMeal(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            this.form.courseId = this.courseId
            addSetMeal(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getSetMeal(id).then(response => {
        const data = response.data
        data.discount = data.discount?.toString()
        data.number = data.number?.toString()
        this.form = data
        this.open = true
        this.title = "修改套餐"
      })
    },
    /** 下架按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认下架套餐？').then(function() {
        return delSetMeal(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("下架成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport(name) {
      this.download('ysg/setMeal/export', {
        ...this.queryParams
      }, `${name}套餐表.xlsx`)
    },
  },
}
</script>
<style scoped>

</style>
